#![allow(non_snake_case)]
use crate::{Pagination, SelectOption, SelectRaw, TableState};
use icondata as i;
use leptos::prelude::*;
use leptos_icons::*;
use shq_common::prelude::TableFooterShowProps;
use thaw_utils::ArcOneCallback;
#[component]
pub fn TableFooter(
    //数据总数
    #[prop(into)] total: MaybeProp<usize>,
    ///点击导出按钮
    #[prop(optional, into)]
    export_click: Option<ArcOneCallback<bool>>,
    ///能否翻页
    #[prop(optional, into)]
    show_props: TableFooterShowProps,
    ///能否翻页
    #[prop(optional, into)]
    has_export_sheet_col: bool,
    ///是否客户端
    #[prop(optional, into)]
    is_client: MaybeProp<bool>,
) -> impl IntoView {
    let table_state =
        use_context::<ReadSignal<TableState>>().expect("ReadSignal<TableState>在上下文中不存在");
    let page = table_state.with_untracked(|ts| ts.page());
    let page_size = table_state.with_untracked(|ts| ts.page_size());
    let show_drawer = table_state.with_untracked(|ts| ts.show_sel_cols_drawer());
    let show_model = table_state.with_untracked(|ts| ts.show_order_filter_model());
    Effect::new(move |prev_page| {
        let page = page.get();
        if prev_page != Some(page) {
            if !is_client.get().unwrap_or_default() {
                table_state.with_untracked(|ts| {
                    ts.set_selected_all(false);
                });
            }
        }
        page
    });
    let page_size_view = move || {
        if !show_props.can_page_size {
            return None;
        }
        let vals: Vec<usize> = vec![10, 20, 50, 100, 200];
        let options = vals
            .into_iter()
            .map(|v| SelectOption {
                label: format!("每页显示{}行", v),
                value: v,
            })
            .collect::<Vec<SelectOption<usize>>>();
        let label = format!("每页显示{}行", page_size.get());
        let on_select = ArcOneCallback::new(move |val: Option<usize>| {
            page_size.set(val.unwrap_or(20));
            page.set(1);
            if !is_client.get().unwrap_or_default() {
                table_state.with_untracked(|ts| ts.set_selected_all(false));
            }
        });
        Some(view! {
            <SelectRaw values=vec![page_size.get()]
                    options
                    on_select
            >
                    <div class="btn" style="width:172px">{label}</div>
            </SelectRaw>
        })
    };
    let export_view = move || {
        if let Some(export_click) = export_click.clone() {
            let export_click2 = export_click.clone();
            if has_export_sheet_col {
                Some(view! {
                    <div class="dropdown dropdown-top">
                        <label tabindex="0" class="btn m-1">导出<Icon icon=i::AiExportOutlined/></label>
                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
                            <li><a on:click=move|_|export_click(true)>导出为多个文件</a></li>
                            <li><a on:click=move|_|export_click2(false)>导出为单个文件</a></li>
                        </ul>
                    </div>
                }.into_any())
            } else {
                Some(view! {
                    <div class="btn" on:click=move|_|export_click(false)><Icon icon=i::AiExportOutlined/>导出</div>
                }.into_any())
            }
        } else {
            None
        }
    };
    let order_filter_btn = move || {
        if !show_props.can_order_filter {
            return None;
        }
        let has_order_filter = table_state.with_untracked(|ts| ts.has_filter() || ts.has_order());
        if has_order_filter {
            Some(view! {
                <div class="btn" on:click=move|_|show_model.set(true)><Icon icon=i::AiBarsOutlined/>排序和筛选</div>
            })
        } else {
            None
        }
    };
    view! {
        <div class="flex-none navbar bg-base-100 rounded-b-lg flex flex-row justify-between">
            <div class="flex-1 space-x-4">
                {page_size_view}
                {
                    move || if show_props.can_sel_cols {
                        Some(view!{<div class="btn" on:click=move|_|show_drawer.set(true)><Icon icon=i::AiBarsOutlined/>选择列头</div>})
                    }else{
                        None
                    }
                }
                {order_filter_btn}
                {export_view}
            </div>
            {
                move || if show_props.can_page {
                    Some(view!{<Pagination page=page page_size=page_size total/>})
                }else{
                    None
                }
            }
        </div>
    }
}
